<template>
	<view class="out">

		<view class="box box1">
			<text class="text">Lishang</text>
			<text class="title">尊贵会员</text>
			<text class="number">60035233</text>
		</view>
		<view class="box box2">
			<text class="text">Lishang</text>
			<text class="title">尊贵银卡会员</text>
			<text class="number">60035233</text>
		</view>
		<view class="box box3">
			<text class="text">Lishang</text>
			<text class="title">尊贵黄金会员</text>
			<text class="number">60035233</text>
		</view>
		<view class="box box4">
			<text class="text">Lishang</text>
			<text class="title">尊贵白金会员</text>
			<text class="number">60035233</text>
		</view>
	</view>
</template>
<script setup>

</script>
<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.out {
		display: flex;
		flex-direction: column;
		padding-top: 80rpx;
		background-color: #f7f7f7;

		.box {
			position: relative;
			/* 定位基准 */
			height: 300rpx;
			/* 最小高度防止塌陷 */
			margin: 40rpx auto;
			/* 上下间距 */
			/* margin-top: 40rpx; */
			padding: 20rpx;
			/* 内边距 */
			max-width: calc(750rpx * 0.8);
			border-radius: 32rpx;
			width: 640rpx;
			height: 360rpx;
		}

		.box1 {
			margin-top: 80rpx;
			color: #4c2921;
			background: linear-gradient(to bottom right, #fdf7ff, #ED977A);
		}

		.box2 {
			background: linear-gradient(to bottom right, #f5f8fe, #C2D3EB);
			color: #7487af;
		}

		.box3 {
			background: linear-gradient(to bottom right, #f6f6ec, #F4E1A1, #F6CC64);
			color: #e38331;
		}

		.box4 {
			background: linear-gradient(to bottom right, #fafbff, #dfe0e7, #fafbff, #e4e5ec, #b3b4b8);
			color: #121212;
		}

		.text {
			position: absolute;
			top: 40rpx;
			left: 30rpx;
			font-family: var(PingFang SC);
			font-size: 28rpx;
			font-weight: 400;
		}

		.title {
			position: absolute;
			top: 90rpx;
			left: 30rpx;
			font-family: var(Alimama ShuHeiTi);
			font-size: 42rpx;
			font-weight: 700;
		}

		.number {
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;
			font-family: var(PingFang SC);
			font-size: 28rpx;
			font-weight: 400;
		}
	}
</style>